<template>
  <!--任务/行动-->
  <div>
    <!--按客户查找-->
    <el-row>
      <el-col :span="14">
       <span>客户：</span>
        <el-select @change="changeCus(calendarCusValues)" v-model="calendarCusValues" placeholder="全部" >
          <el-option v-for="cus in calendarCusOptions" :key="cus.customerId" :value="cus.customerId"
          :label="cus.customerName"></el-option>
        </el-select>
      </el-col>
      <el-col :span="10">
        <el-button @click="findQb">全部</el-button>
        <span>：</span>
        <el-button @click="findDb">待办任务</el-button>
        <span>（</span>
        <el-button @click="findZxz" size="small">执行中</el-button>
        <el-button @click="findJs" size="small">结束</el-button>
        <el-button @click="findQx" size="small">取消</el-button>
        <span>）</span>
        <el-button @click="findJl">行动历史</el-button>
      </el-col>
    </el-row>
    <!--日历-->
    <el-row style="margin-top: 15px">
      <el-calendar>
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
        <template slot="dateCell" slot-scope="{date, data}">
          <div>
            <ul>
              <li>
                 <span>
                {{ data.day.split('-').slice(1).join('-') }}
                </span>
                <span @click="calendarAction(data.day)" v-if="comDate(date) == 1"class="ca-icon">
                   <el-icon class="el-icon-s-fold"></el-icon>
                </span>
                <span @click="calendarTask(data.day)" v-if="comDate(date) == 2" class="ca-icon">
                   <el-icon class="el-icon-s-goods "></el-icon>
                </span >
                <span v-if="comDate(date) == 3" class="ca-icon">
                  <span @click="calendarAction(data.day)">
                   <el-icon class="el-icon-s-fold"></el-icon>
                  </span>
                  <span @click="calendarTask(data.day)">
                   <el-icon class="el-icon-s-goods"></el-icon>
                  </span >
                </span >
              </li>
              <li v-if="item.taskFinishDate == data.day" :key="index" v-for="(item,index) in taskActList">
                <div>
                  <div @click="openTaskView(item)" class="acr" v-if="item.taskIs == 1">
                    <div class="sd">
                      <b>{{item.customerByCustomerId.customerName}}:</b>{{item.taskDescribe}}
                    </div>
                  </div>
                  <div @click="handleEdit(item)" class="acp" v-if="item.taskIs == 2">
                    <div class="sd">
                      <b>{{item.customerByCustomerId.customerName}}:</b>{{item.taskDescribe}}
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </template>
      </el-calendar>
    </el-row>
    <!--任务/行动查找-->
    <el-row style="margin-top: 15px">
      <span style="padding: 0 10px"><i class="font-14 el-icon-s-open"></i></span>
      <el-select v-model="filterValue" @change=" initData(currPage,pageSize,filterValue,content)" placeholder="全部数据" style="width: 120px">
        <el-option-group v-for="group in filterOptions" :key="group.label" :label="group.label">
          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item">
          </el-option>
        </el-option-group>
      </el-select>
      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-message-solid"></i></span>
      <el-input v-model="content" placeholder="请输入内容" clearable style="width: 150px"></el-input>
      <el-select v-model="vagueValue" placeholder="行动主题" style="width: 120px">
        <el-option v-for="item in vagueOptions" :key="item.value"
                   :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="initData(currPage,pageSize,filterValue,content)" icon="el-icon-search" size="small" circle></el-button>
    </el-row>
    <!--新建任务/行动-->
    <el-row style="margin-top: 15px">
      <el-col :span="12">
        <span>待办任务/行动</span>
        <small class="text-muted font-13">共{{totalSize}}条</small>
      </el-col>
      <el-col :span="12" class="text-right">
        <el-button type="text" @click="dialogAct = true">
          <el-button size="small" icon="el-icon-circle-plus-outline">新建</el-button>
        </el-button>
      </el-col>
      <!--待办任务dialog-->
      <el-dialog title="待办任务" :visible.sync="dialogTask" width="60%" style="color: #333333"
                 @open="openDialogTask" @close="closeDialogTask">
        <el-form ref="task" :model="task" label-width="100px" :rules="taskRules">
          <el-divider></el-divider>
          <el-row>
            <el-col>
              <el-form-item label="行动描述:" prop="taskDescribe">
                <el-input v-model="task.taskDescribe" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"  style="width: 91%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="执行人:" prop="employeeByExeEmpId.empName">
                <el-input :disabled="true" v-model="task.employeeByExeEmpId.empName" style="width: 91%">
                  <el-button @click="openEmpDialog" slot="append" icon="el-icon-search" ></el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="完成期限:">
                <el-date-picker v-model="task.taskFinishDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width: 79%"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="时间:">
                <el-time-picker v-model="task.taskTime" value-format="hh:mm:ss" style="width:79%" :picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
                                placeholder="任意时间点">
                </el-time-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" style="line-height: 40px">
              <el-form-item label="优先:">
                <el-radio-group v-model="task.taskPriority">
                  <el-radio :label="1">高</el-radio>
                  <el-radio :label="2">低</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="客户:" prop="customerByCustomerId.customerName">
                <el-input :disabled="true" v-model="task.customerByCustomerId.customerName" style="width: 91%"></el-input>
              </el-form-item>
              <div class="form-inline" v-show="isCustomer">
                <el-input v-model="customerValue" clearable size="medium" placeholder="拼音.字母.关键字" style="width: 20%"></el-input>
                <el-button @click="findCustomer" size="medium" icon="el-icon-search"></el-button>
                <el-popover placement="top" v-model="visible">
                  <div style="margin-bottom: 10px">
                    <span>查询条件:{{customerValue}}</span>
                    <span @click="cleanCustomer" class="cursor" style="float: right"><i class="el-icon-error"></i></span>
                  </div>
                  <ul class="cu-ul" v-if="customerList2 !== ''">
                    <li @click="choiceCustomer2(item)" v-for="item in customerList2">{{item.customerName}}</li>
                  </ul>
                  <div style="margin: 5px 0;text-align: center" v-if="customerList2 == ''">
                    <i class="el-icon-warning-outline"/>没有符合条件的客户！
                  </div>
                </el-popover>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button @click="innerVisible(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" style="line-height: 40px">
              <el-form-item label="联系人:">
                <el-select v-model="task.taskContactName" placeholder="未选" style="width: 79%">
                  <el-option v-for="(item,index) in contactList" :key="index" :label="item.contactName" :value="item.contactName">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态:">
                <el-radio-group v-model="task.taskStatus">
                  <el-radio :label="1">未结束</el-radio>
                  <el-radio :label="2">已结束</el-radio>
                  <el-radio :label="3">取消</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="创建人:" >
                <el-input v-model="task.employeeByEmpId.empName" :disabled="true" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间:">
                <el-input v-model="task.taskCreateDate" :disabled="true" style="width: 79%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="6">
              <el-form-item>
                <el-button @click="saveTask" type="primary">保存</el-button>
                <el-button @click="dialogTask = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--内层dialog客户-->
        <el-dialog width="30%" title="客户选择" :visible.sync="innerDialog" append-to-body>
          <!--选择客户-->
          <el-table :data="customerList" style="width: 100%">
            <el-table-column prop="customerId" label="客户编号" >
            </el-table-column>
            <el-table-column prop="customerName" label="客户名" >
            </el-table-column>
            <el-table-column label="请选择" >
              <template slot-scope="scope">
                <el-button size="mini" @click="choiceCustomer(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="margin-top:10px">
            <el-col :span="16">
              <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="cusChangePage"
                             :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
            </el-col>
          </el-row>
        </el-dialog>
        <!--内层dialog员工-->
        <el-dialog width="30%" title="人员选择" :visible.sync="innerDialogEmp" append-to-body @close="closeInnerDialogEmp">
          <div>
            <el-collapse v-model="activeName">
              <el-collapse-item v-for ="(dept,index) in deptList" :title="dept.deptName" :key="index" :name="dept.deptId">
                <ul class="emp-ul">
                  <li @click="choiceEmp(emp)" v-for="(emp,index) in dept.employeeByDeptId">
                    <span v-if="index !== dept.employeeByDeptId.length-1" class="line-style"></span>
                    <span v-if="index === dept.employeeByDeptId.length-1" class="line-style-end"></span>
                    <span class="">{{emp.empName}}</span>
                  </li>
                </ul>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-dialog>
      </el-dialog>
      <!--行动历史记录dialog-->
      <el-dialog title="行动历史记录" :visible.sync="dialogAct" width="60%" style="color: #333333"
                 @open="openDialogAct" @close="closeDialogAct">
        <el-form ref="act" :model="action" label-width="100px" :rules="actRules">
          <el-divider></el-divider>
          <el-row>
            <el-col>
              <el-form-item label="行动描述:" prop="taskDescribe">
                <el-input v-model="action.taskDescribe" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"  style="width: 91%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="客户:" prop="customerByCustomerId.customerName">
                <el-input :disabled="true" v-model="action.customerByCustomerId.customerName" style="width: 91%"></el-input>
              </el-form-item>
              <div class="form-inline" v-show="isCustomer">
                <el-input v-model="customerValue" clearable size="medium" placeholder="拼音.字母.关键字" style="width: 20%"></el-input>
                <el-button @click="findCustomer" size="medium" icon="el-icon-search"></el-button>
                <el-popover placement="top" v-model="visible">
                  <div style="margin-bottom: 10px">
                    <span>查询条件:{{customerValue}}</span>
                    <span @click="cleanCustomer" class="cursor" style="float: right"><i class="el-icon-error"></i></span>
                  </div>
                  <ul class="cu-ul" v-if="customerList2 !== ''">
                    <li @click="choiceCustomer2(item)" v-for="item in customerList2">{{item.customerName}}</li>
                  </ul>
                  <div style="margin: 5px 0;text-align: center" v-if="customerList2 == ''">
                    <i class="el-icon-warning-outline"/>没有符合条件的客户！
                  </div>
                </el-popover>
                <el-tooltip class="item" effect="dark" content="浏览选择客户" placement="bottom">
                  <el-button @click="innerVisible(cusCurrPage,cusPageSize)" size="medium" icon="el-icon-s-operation"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" style="line-height: 40px">
              <el-form-item label="联系人:">
                <el-select v-model="action.taskContactName" placeholder="未选" style="width: 79%">
                  <el-option v-for="(item,index) in contactList" :key="index" :label="item.contactName" :value="item.contactName">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" style="line-height: 40px">
              <el-form-item label="维修单:">
                <el-select v-model="action.maintenanceByMaiId" value-key="maiId" placeholder="未选" style="width: 79%">
                  <el-option v-for="item in maintenanceList" :key="item.maiId" :label="item.maiNo" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="类型:" prop="taskClassify">
                <el-select v-model="action.taskClassify" placeholder="未选" style="width: 270px">
                  <el-option v-for="item in actOptions" :key="item.label" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="日期:">
                <el-date-picker v-model="action.taskFinishDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width:79%"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="执行人:" prop="employeeByExeEmpId.empName">
                <el-input :disabled="true" v-model="action.employeeByExeEmpId.empName" style="width: 91%">
                  <el-button @click="openEmpDialog()" slot="append" icon="el-icon-search" ></el-button>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="7">
              <el-form-item>
                <el-button @click="saveAction" type="primary">保存</el-button>
                <el-button @click="dialogAct = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--内层dialog客户-->
        <el-dialog width="30%" title="客户选择" :visible.sync="innerDialog" append-to-body @close="closeInnerDialogEmp">
          <!--选择客户-->
          <el-table :data="customerList" style="width: 100%">
            <el-table-column prop="customerId" label="客户编号" >
            </el-table-column>
            <el-table-column prop="customerName" label="客户名" >
            </el-table-column>
            <el-table-column label="请选择" >
              <template slot-scope="scope">
                <el-button size="mini" @click="choiceCustomer(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="margin-top:10px">
            <el-col :span="16">
              <el-pagination layout="prev, pager, next, jumper" :total="cusTotalSize" @current-change="cusChangePage"
                             :current-page.sync="cusCurrPage" :page-size="cusPageSize"></el-pagination>
            </el-col>
          </el-row>
        </el-dialog>
        <!--内层dialog员工-->
        <el-dialog width="30%" title="人员选择" :visible.sync="innerDialogEmp" append-to-body>
          <div>
            <el-collapse v-model="activeName">
              <el-collapse-item v-for ="(dept,index) in deptList" :title="dept.deptName" :key="index" :name="dept.deptId">
                <ul class="emp-ul">
                  <li @click="choiceEmp(emp)" v-for="(emp,index) in dept.employeeByDeptId">
                    <span v-if="index !== dept.employeeByDeptId.length-1" class="line-style"></span>
                    <span v-if="index === dept.employeeByDeptId.length-1" class="line-style-end"></span>
                    <span class="">{{emp.empName}}</span>
                  </li>
                </ul>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-dialog>
      </el-dialog>
    </el-row>
    <!--任务/行动表格-->
    <el-table :data="actionList" tooltip-effect="dark" @selection-change="handleSelectionChange" id="outTable"
              style="width: 100%;border-top: 1px solid #EBEEF5" :header-cell-style="rowClass" border>
      <el-table-column type="selection" ></el-table-column>
      <el-table-column prop="taskId" label="ID" wsortable sortable></el-table-column>
      <el-table-column label="类型" >
        <template slot-scope="scope">
          <span style="color: black" v-if="scope.row.taskIs === 1">待办任务</span>
          <span style="color: black" v-if="scope.row.taskIs === 2">记录</span>
        </template>
      </el-table-column>
      <el-table-column prop="taskDescribe" label="主题" ></el-table-column>
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="未结束" placement="bottom">
                        <span v-if="scope.row.taskStatus === 1" style="color: #215ca0">
                          <i class="el-icon-s-promotion"></i>
                        </span>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="已结束" placement="bottom">
                        <span v-if="scope.row.taskStatus === 2" style="color: #215ca0">
                          <i class="el-icon-success"></i>
                        </span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="客户" width="200">
        <template slot-scope="scope">
            {{scope.row.customerByCustomerId.customerName}}
            <el-tooltip class="item" effect="dark" content="打开详细页面" placement="bottom">
              <router-link :to="{path:'/customerview',query: {customerId: scope.row.customerByCustomerId.customerId}}">
                <i style="color: #333333" class="el-icon-s-cooperation"></i>
              </router-link>
            </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="taskFinishDate" label="时间" >
        <template slot-scope="scope">
         <span>{{scope.row.taskFinishDate | formatDateJudge}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="employeeByExeEmpId.empName" label="执行人" width="200"></el-table-column>
      <el-table-column label="操作" width="110px">
        <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
              <el-button size="mini" @click="handleEdit(scope.row)"
                         icon="el-icon-edit" type="primary" circle style="margin-left: 10px"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
              <el-button size="mini" @click="handleDelete(scope.row)"
                         icon="el-icon-delete" type="danger" circle></el-button>
            </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row style="margin-top:10px">
      <el-col :span="8">
        <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
          <el-button style="padding: 12px 12px" icon="el-icon-delete" @click="handleDeleteMany" type="danger"></el-button>
        </el-tooltip>
      </el-col>
      <el-col :span="13">
        <el-pagination layout="sizes,prev,pager, next, jumper" :total="totalSize" @current-change="changePage"
                       :current-page.sync="currPage" :page-size="pageSize" :page-sizes="pageSizes" @size-change="changeSize"></el-pagination>
      </el-col>
      <el-col :span="3">
        <el-tooltip class="item" effect="dark" content="打印列表" placement="bottom">
          <el-button @click="handleWindowPrint('#outTable', '列表打印')" style="padding: 12px 12px" type="info" plain  icon="el-icon-printer"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="批量导出Excel格式数据" placement="bottom">
          <el-button @click="batchExportExcel" style="padding: 12px 12px" type="info" plain  icon="el-icon-document-copy"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="导出Excel格式数据" placement="bottom">
          <el-button @click="exportExcel" style="padding: 12px 12px" type="info" plain  icon="el-icon-document-remove"></el-button>
        </el-tooltip>
      </el-col>
    </el-row>
    <!-- 统计-->
    <el-row>
      <el-col :span="8">
        <div class="font-14-bold" style="margin: 30px 0 0 30px">分布</div>
        <div style="width: 400px;height:400px;margin: 20px auto 0px" ref="pieCharts"></div>
        <div style="margin-left: 30px">
          <el-select v-model="pieValue" @change="changePie(pieValue)" placeholder="未选" style="width: 350px">
            <el-option v-for="item in pieOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="font-14-bold" style="margin: 30px 0 0 30px">Top</div>
        <div style="width: 400px;height:400px;margin: 20px auto 0px" ref="columnarCharts"></div>
        <div style="margin-left: 30px">
          <el-select v-model="columnarValue" @change="changeColumnar(columnarValue)" placeholder="未选" style="width: 350px">
            <el-option v-for="item in columnarOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="font-14-bold" style="margin: 30px 0 0 30px">工具</div>
        <div style="width: 400px;height:400px;margin: 20px auto 0px" ref="lineCharts"></div>
        <div style="margin-left: 30px">
          <el-select v-model="lineValue" @change="changeLine(lineValue)" placeholder="未选" style="width: 350px">
            <el-option v-for="item in lineOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import XLSX from "xlsx";
  import FileSaver from "file-saver";
  import {formatTimeToStr} from "../assets/format";

  export default {
  data () {
    return {
      dialogTask: false,
      dialogAct: false,
      customerList: [], // 员工客户集合
      contactList: [], // 客户联系人集合
      maintenanceList: [],//维修工单集合
      pageSize: 10, // 分页页大小
      pageSizes:[10,20,30],//页大小数组
      currPage: 1, // 当前页码，默认为1
      totalSize: 0, // 总记录数
      cusPageSize: 5, // 分页页大小
      cusCurrPage: 1, // 当前页码，默认为1
      cusTotalSize: 0, // 总记录数
      calendarCusOptions:[{customerId:0,customerName:'全部'}],
      calendarCusValues:0,//绑定值
      type:0,// 日历分类查询
      isCustomer: true, // 客户搜索显示
      innerDialog: false,// 内层dialog客户
      innerDialogEmp: false,// 内层dialog员工
      activeName: [],
      deptList:[],
      content: '',// input内容
      customerValue:'',// 模糊绑定值
      customerList2:[],// 模糊查询结果
      visible: false,// 模糊搜索结果
      taskActList:[],// 所有待办任务与记录
      taskList: [],//待办任务集合
      task: {
        taskId:0,
        taskDescribe:'',
        taskContactName:'',
        taskFinishDate:'',
        taskTime:null,
        taskPriority:'',
        taskStatus:'',
        taskCreateDate:'',
        taskIs:'',
        opportunityByOppId:null,
        customerByCustomerId:{},
        employeeByEmpId:'',
        employeeByExeEmpId:{},
      },
      taskRules: {
        taskDescribe: [
          {required: true, message: '必须填', trigger: 'blur'}
        ],
        'customerByCustomerId.customerName': [
          { required: true, message: '请选择客户', trigger: 'blur' }
        ],
        'employeeByExeEmpId.empName': [
          { required: true, message: '请选择负责人', trigger: 'blur' }
        ]
      },
      actionList: [],
      action:{
        taskId:0,
        taskDescribe:'',
        taskExecutor:'',
        taskContactName:'',
        taskFinishDate:'',
        taskClassify:'',
        taskIs:'',
        opportunityByOppId:null,
        customerByCustomerId:{},
        employeeByEmpId:'',
        employeeByExeEmpId:{},
        maintenanceByMaiId:null
      },
      actRules: {
        taskDescribe: [
          {required: true, message: '必须填', trigger: 'blur'}
        ],
        'customerByCustomerId.customerName': [
          { required: true, message: '请选择客户', trigger: 'blur' }
        ],
        'employeeByExeEmpId.empName': [
          { required: true, message: '请选择负责人', trigger: 'blur' }
        ],
        taskClassify: [
          { required: true, message: '必须填', trigger: 'change' }
        ]
      },
      mulSelection: [],
      actOptions: [{
        value: 1,
        label: '电话'
      }, {
        value: 2,
        label: '上门'
      }, {
        value: 3,
        label: '来访接待'
      }, {
        value: 4,
        label: '会议'
      },{
        value: 5,
        label: '培训'
      }, {
        value: 6,
        label: '商务餐旅'
      }, {
        value: 7,
        label: '外出活动'
      },{
        value: 8,
        label: '其他'
      }, {
        value: 9,
        label: '微信记录'
      }, {
        value: 10,
        label: 'QQ记录'
      }, {
        value: 11,
        label: '电话随记'
      }],
      filterOptions: [{
        label: '',
        options: [{
          value: 0,
          label: '全部数据'
        }]
      }, {
        label: '代办',
        options: [{
          value: 1,
          label: '待办任务',
          num:0
        },{
          value: 2,
          label: '待办任务-未结束',
          num:1
        },{
          value: 3,
          label: '待办任务-已结束',
          num:2
        },{
          value: 4,
          label: '待办任务-取消',
          num:3
        }]
      },{
        label: '行动',
        options: [{
          value: 5,
          label: '行动记录',
          num:0
        }]
      },{
        label: '类型',
        options: [{
          value: 6,
          label: '电话',
          num:1
        }, {
          value: 7,
          label: '上门',
          num:2
        }, {
          value: 8,
          label: '来访接待',
          num:3
        }, {
          value: 9,
          label: '会议',
          num:4
        },{
          value: 10,
          label: '培训',
          num:5
        }, {
          value: 11,
          label: '商务餐旅',
          num:6
        }, {
          value: 12,
          label: '外出活动',
          num:7
        },{
          value: 13,
          label: '其他',
          num:8
        }, {
          value: 14,
          label: '微信记录',
          num:9
        }, {
          value: 15,
          label: 'QQ记录',
          num:10
        }, {
          value: 16,
          label: '电话随记',
          num:11
        }]
      }],
      filterValue: {value:0,label: '全部数据',num:0},
      vagueOptions: [{
        value: 1,
        label: '行动主题'
      }],
      vagueValue:1,
      pieOptions: [{
        value: 1,
        label: '日程任务行动类型分布'
      }, {
        value: 2,
        label: '记录信息类型分布'
      },{
        value: 3,
        label: '任务完成状态分布'
      },{
        value: 4,
        label: '任务优先程度分布'
      }],
      pieValue: 1,
      pieList:[],
      pieDataList: [],
      pieNumList: [],
      columnarOptions: [{
        value: 1,
        label: '数量人员/月度统计'
      }, {
        value: 2,
        label: '客户联系次数统计'
      }],
      columnarValue: 1,
      columnarList: [],
      columnarDataList: [],
      columnarNumList: [],
      lineOptions: [{
        value: 1,
        label: '待办任务数量/月份统计'
      }, {
        value: 2,
        label: '行动历史记录数量/月份统计'
      }],
      lineValue: 1,
      lineList: [],
      lineDataList: [],
      lineNumList: [],
      chatRecord:{
        chatRecordId: 0,
        chatRecordContent: '新建待办任务',
        chatRecordDate:null,
        employeeByEmpId:'',
        taskByTaskId:''
      },
      selectList:[]
    }
  },
  methods: {
    // 查询当前员工
    loginEmp(){
      this.$axios.get('http://localhost:8088/emp')
        .then(v => {
          this.emp = v.data
        })
        .catch(function (v) {})
    },
    // 分页查询待办任务与记录
    initData(currPage,pageSize,filter,content){
      this.$axios.get('http://localhost:8088/task-action-list',{
        params:{
          page:currPage,
          size:pageSize,
          value:filter.value,
          num:filter.num,
          content:content
        }
      })
        .then(v => {
          this.actionList = v.data.rows
          this.totalSize = v.data.total
        })
        .catch(function (v) {})
    },
    // 报价表格分页
    changePage (val) {
      this.initData(val,this.pageSize,this.filterValue,this.content)
    },
    //改变页大小
    changeSize(val){
      this.pageSize = val
      this.currPage = 1
      this.initData(this.currPage,this.pageSize,this.filterValue,this.content)
    },
    // 查询待办任务与记录
    initAllData(){
      this.$axios.get('http://localhost:8088/task-action-all-list')
        .then(v => {
          this.taskActList = v.data
        })
        .catch(function (v) {})
    },
    // 查询联系人
    choiceContact(customerId){
      this.$axios.get('http://localhost:8088/contact-list', {
        params: {
          customerId : customerId
        }
      })
        .then(v => {
          this.contactList = v.data
        })
        .catch(function (v) {})
    },
    // 查询客户
    findCalendarCus () {
      this.$axios.get('http://localhost:8088/emp-all-customer-list')
        .then(v => {
          v.data.forEach(row => {
            this.calendarCusOptions.push(row)
          })
        })
        .catch(function (v) {})
    },
    // 选择客户查询
    changeCus(cusId){
      this.$axios.get('http://localhost:8088/task-action-cus-list',{
        params:{
          type:this.type,
          cusId:cusId
        }
      })
        .then(v => {
         this.taskActList = v.data
        })
        .catch(function (v) {})
    },
    // 查询维修工单
    findMaintenanceList(cusId){
      this.$axios.get('http://localhost:8088/maintenance-cus-list',{
        params:{
          cusId:cusId
        }
      })
        .then(v => {
          this.maintenanceList = v.data
        })
        .catch(function (v) {})
    },
    // 点击全部按钮
    findQb(){
      this.type = 0
      this.changeCus(this.calendarCusValues)
    },
    // 点击待办任务
    findDb(){
      this.type = 4
      this.changeCus(this.calendarCusValues)
    },
    // 点击执行中
    findZxz(){
      this.type = 1
      this.changeCus(this.calendarCusValues)
    },
    // 点击结束
    findJs(){
      this.type = 2
      this.changeCus(this.calendarCusValues)
    },
    // 点击取消
    findQx(){
      this.type = 3
      this.changeCus(this.calendarCusValues)
    },
    // 点击行动历史
    findJl(){
      this.type = 5
      this.changeCus(this.calendarCusValues)
    },
    // 打开内层dialog查询客户
    innerVisible (cusCurrPage,cusPageSize) {
      this.$axios.get('http://localhost:8088/emp-customer-list', {
        params: {
          page: cusCurrPage,
          size: cusPageSize,
        }
      })
        .then(v => {
          this.customerList = v.data.rows
          this.cusTotalSize = v.data.total
        })
        .catch(function (v) {})
      this.innerDialog = true
    },
    // 查询客户分页
    cusChangePage (val) {
      // val就是当前页码
      this.innerVisible(val, this.cusPageSize)
    },
    // 选择客户
    choiceCustomer(val){
      if (this.dialogAct === true){
        this.action.customerByCustomerId = val
        this.action.maintenanceByMaiId = null
        this.findMaintenanceList(val.customerId)
      }else {
        this.task.customerByCustomerId = val
      }
      this.choiceContact(val.customerId)
      this.action.taskContactName = ''
      this.task.taskContactName = ''
      this.innerDialog = false;
    },
    // 模糊查询客户
    findCustomer(){
      if (this.customerValue != ''){
        this.visible = true
        this.$axios.get('http://localhost:8088/emp-fuzzy-customer-list', {
          params: {
            customerName: this.customerValue
          }
        })
          .then(v => {
            this.customerList2 = v.data
          })
          .catch(function (v) {})
      }else {
        this.visible = false
      }
    },
    // 模糊选择客户
    choiceCustomer2(val){
      if (this.dialogAct == true){
        this.action.customerByCustomerId = val
        this.action.maintenanceByMaiId = null
        this.findMaintenanceList(val.customerId)
      }else {
        this.task.customerByCustomerId = val
      }
      this.choiceContact(val.customerId)
      this.action.taskContactName = ''
      this.task.taskContactName = ''
      this.visible = false
      this.customerValue = ''
    },
    //查询部门员工
    findDeptList () {
      this.$axios.get('http://localhost:8088/dept-emp-list')
        .then(v => {
          this.deptList = v.data
          for(let i = 1;i <= this.deptList.length;i++){
            this.activeName.push(i)
          }
        })
        .catch(function (v) {})
    },
    //打开员工dialog
    openEmpDialog(){
      this.innerDialogEmp = true
      this.findDeptList()
    },
    // 选择员工
    choiceEmp(val) {
      if (this.dialogAct === true){
        this.action.employeeByExeEmpId = val
      }else if (this.dialogTask === true) {
        this.task.employeeByExeEmpId = val
      }
      this.innerDialogEmp = false;
    },
    //关闭员工diglog事件
    closeInnerDialogEmp(){
      this.activeName = []
    },
    // 失去焦点关闭模糊搜索框
    cleanCustomer(){
      this.visible = false
      this.customerValue = ''
    },
    // 进入待办任务视图
    openTaskView(val){
      this.$router.push({path:'taskview',query: {taskId:val.taskId}})
    },
    // 数据回显
    handleEdit(val){
      if (val.taskIs === 1){
        this.dialogTask = true;
        this.task.taskId = val.taskId
        this.task.taskDescribe = val.taskDescribe
        this.task.employeeByExeEmpId = val.employeeByExeEmpId
        this.task.taskContactName = val.taskContactName
        this.task.taskFinishDate = val.taskFinishDate
        this.task.taskCreateDate = val.taskCreateDate
        this.task.taskTime = val.taskTime
        this.task.taskStatus = val.taskStatus
        this.task.taskPriority = val.taskPriority
        this.task.customerByCustomerId = val.customerByCustomerId
        this.task.employeeByEmpId = val.employeeByEmpId
        this.task.opportunityByOppId = val.opportunityByOppId
        this.choiceContact(val.customerByCustomerId.customerId)
        this.isCustomer = false
      }else if (val.taskIs === 2){
        this.dialogAct = true;
        this.action.taskId = val.taskId
        this.action.taskDescribe = val.taskDescribe
        this.action.employeeByExeEmpId = val.employeeByExeEmpId
        this.action.taskContactName = val.taskContactName
        this.action.taskFinishDate = val.taskFinishDate
        this.action.taskClassify = val.taskClassify
        this.action.customerByCustomerId = val.customerByCustomerId
        this.action.employeeByEmpId = val.employeeByEmpId
        this.action.opportunityByOppId = val.opportunityByOppId
        this.action.maintenanceByMaiId = val.maintenanceByMaiId
        this.choiceContact(val.customerByCustomerId.customerId)
        this.findMaintenanceList(val.customerByCustomerId.customerId)
        this.isCustomer = false
      }
    },
    // 打开代办任务dialog事件
    openDialogTask () {
      if (this.task.taskId === 0){
        this.task.employeeByExeEmpId = this.emp
        this.task.taskStatus = 1
        this.task.taskPriority = 1
      }
    },
    // 关闭代办任务dialog事件
    closeDialogTask () {
      this.$refs.task.resetFields()
      this.task = {
        taskId:0,
        taskDescribe:'',
        taskContactName:'',
        taskFinishDate:'',
        taskTime:null,
        taskPriority:'',
        taskStatus:'',
        taskCreateDate:'',
        taskIs:'',
        opportunityByOppId:null,
        customerByCustomerId:{},
        employeeByEmpId:'',
        employeeByExeEmpId:{}
      }
      this.isCustomer = true
    },
    // 新增、修改代办任务
    saveTask () {
      this.task.taskIs = 1
      if (this.task.taskId === 0){
        this.task.taskCreateDate = this.addDate()
        this.task.employeeByEmpId = this.emp
      }
      this.$refs.task.validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/save-task',
            {
              taskId:this.task.taskId,
              taskDescribe:this.task.taskDescribe,
              taskContactName:this.task.taskContactName,
              taskFinishDate:this.task.taskFinishDate,
              taskTime:this.task.taskTime,
              taskPriority:this.task.taskPriority,
              taskStatus:this.task.taskStatus,
              taskCreateDate:this.task.taskCreateDate,
              taskIs:this.task.taskIs,
              customerByCustomerId:this.task.customerByCustomerId,
              employeeByEmpId:this.task.employeeByEmpId,
              employeeByExeEmpId:this.task.employeeByExeEmpId,
              opportunityByOppId:this.task.opportunityByOppId,
              chatRecordsByQuotationId:[{
                chatRecordId: 0,
                chatRecordContent: '新建待办任务',
                chatRecordDate:null,
                employeeByEmpId:this.emp,
                taskByTaskId:null
              }]
            })
            .then(v => {
              // 1、刷新数据
              this.initData(this.currPage,this.pageSize,this.filterValue,this.content)
              this.initAllData()
              this.actionTaskData()
              this.numDateData()
              this.taskNumDateData()
              // 2、关闭弹框
              this.dialogTask = false
              this.disListData = []
              this.disListJson = []
              this.dateListData = []
              this.dateListNum = []
              this.lineListData = []
              this.lineListNum = []
              this.fbValue = 1
              this.sjValue = 1
              this.zxValue = 1
              this.$message({
                message: '已保存',
                type: 'success'
              });
            })
            .catch(function (v) {})
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 打开记录dialog事件
    openDialogAct () {
      if (this.action.taskId === 0){
        this.action.employeeByExeEmpId = this.emp
      }
    },
    // 关闭记录dialog事件
    closeDialogAct () {
      this.$refs.act.resetFields()
      this.action = {
        taskId:0,
        taskDescribe:'',
        taskContactName:'',
        taskFinishDate:'',
        taskClassify:'',
        taskIs:'',
        opportunityByOppId:null,
        customerByCustomerId:{},
        employeeByEmpId:'',
        employeeByExeEmpId:{},
        maintenanceByMaiId:null
      }
      this.isCustomer = true
    },
    // 新增、修改记录
    saveAction () {
      this.action.taskIs = 2
      if (this.action.taskId === 0){
        this.action.employeeByEmpId = this.emp
      }
      this.$refs.act.validate((valid) => {
        if (valid) {
          this.$axios.post('http://localhost:8088/save-action',
            {
              taskId:this.action.taskId,
              taskDescribe:this.action.taskDescribe,
              taskExecutor:this.action.taskExecutor,
              taskContactName:this.action.taskContactName,
              taskFinishDate:this.action.taskFinishDate,
              taskClassify:this.action.taskClassify,
              taskIs:this.action.taskIs,
              customerByCustomerId:this.action.customerByCustomerId,
              employeeByEmpId:this.action.employeeByEmpId,
              employeeByExeEmpId:this.action.employeeByExeEmpId,
              opportunityByOppId:this.action.opportunityByOppId,
              maintenanceByMaiId:this.action.maintenanceByMaiId
            })
            .then(v => {
              // 1、刷新数据
              this.initData(this.currPage,this.pageSize,this.filterValue,this.content)
              this.initAllData()
              this.actionTaskData()
              this.numDateData()
              this.taskNumDateData()
              this.pieValue = 1
              this.pieDataList = []
              this.pieNumList = []
              this.columnarValue = 1
              this.columnarDataList = []
              this.columnarNumList = []
              this.lineValue = 1
              this.lineDataList = []
              this.lineNumList = []
              // 2、关闭弹框
              this.dialogAct = false
              this.$message({
                message: '已保存',
                type: 'success'
              });
            })
            .catch(function (v) {})
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 删除提示
    handleDelete (val) {
      this.$confirm('此操作将永久删除行动记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delete(val.taskId)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 批量删除提示
    handleDeleteMany () {
      this.$confirm('此操作将永久删除勾选行动记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteAll()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取批量删除对象集合
    handleSelectionChange (val) {
      this.mulSelection = val
    },
    // 删除所有
    deleteAll () {
      this.mulSelection.forEach(row => {
        this.delete(row.taskId)
      })
    },
    // 删除axios
    delete(taskId){
      this.$axios.post('http://localhost:8088/delete-task',
        this.qs.stringify({taskId: taskId}))
        .then(v => {
          this.initData(this.currPage,this.pageSize,this.filterValue,this.content)
          this.initAllData()
          this.actionTaskData()
          this.numDateData()
          this.taskNumDateData()
          this.pieValue = 1
          this.pieDataList = []
          this.pieNumList = []
          this.columnarValue = 1
          this.columnarDataList = []
          this.columnarNumList = []
          this.lineValue = 1
          this.lineDataList = []
          this.lineNumList = []
        })
        .catch(function (v) {})
    },
    // 日历添加待办任务回显
    calendarTask(val){
      this.dialogTask = true
      this.task.taskFinishDate = val
    },
    // 日历添加记录回显
    calendarAction(val){
      this.dialogAct = true
      this.action.taskFinishDate = val
    },
    // 切换饼状图
    changePie (val){
      this.pieDataList = []
      this.pieNumList = []
      if (val == 1){
        this.actionTaskData()
      }else if (val == 2){
        this.actionClassifyData()
      }else if (val == 3){
        this.taskStatusData()
      }else if (val == 4){
        this.taskPriorityData()
      }
    },
    // 待办任务与记录分布图数据查询
    actionTaskData () {
      this.$axios.get('http://localhost:8088/com-act-task-list')
        .then(v => {
          this.pieList = v.data
          //计算
          this.computeActionTask()
        })
        .catch(function (v) {})
    },
    // 计算待办任务与记录分布
    computeActionTask (){
      for(let i=0;i<this.pieList.length;i++) {
        if (this.pieList[i].datas == 1){
          this.pieDataList.push('待办任务');
          this.pieNumList.push({value:this.pieList[i].num,name:'待办任务'})
        } else if (this.pieList[i].datas == 2){
          this.pieDataList.push('行动历史记录');
          this.pieNumList.push({value:this.pieList[i].num,name:'行动历史记录'})
        }
      }
    },
    // 记录信息类型分布图数据查询
    actionClassifyData () {
      this.$axios.get('http://localhost:8088/com-act-classify-list')
        .then(v => {
          this.pieList = v.data
          //计算
          this.computeActionClassify()
        })
        .catch(function (v) {})
    },
    // 计算记录信息类型分布
    computeActionClassify (){
      for(let i=0;i<this.pieList.length;i++) {
        if (this.pieList[i].datas === 1){
          this.pieDataList.push('电话');
          this.pieNumList.push({value:this.pieList[i].num,name:'电话'})
        } else if (this.pieList[i].datas === 2){
          this.pieDataList.push('上门');
          this.pieNumList.push({value:this.pieList[i].num,name:'上门'})
        }else if (this.pieList[i].datas === 3){
          this.pieDataList.push('来访接待');
          this.pieNumList.push({value:this.pieList[i].num,name:'来访接待'})
        }else if (this.pieList[i].datas === 4){
          this.pieDataList.push('会议');
          this.pieNumList.push({value:this.pieList[i].num,name:'会议'})
        }else if (this.pieList[i].datas === 5){
          this.pieDataList.push('培训');
          this.pieNumList.push({value:this.pieList[i].num,name:'培训'})
        }else if (this.pieList[i].datas === 6){
          this.pieDataList.push('商务餐旅');
          this.pieNumList.push({value:this.pieList[i].num,name:'商务餐旅'})
        }else if (this.pieList[i].datas === 7){
          this.pieDataList.push('外出活动');
          this.pieNumList.push({value:this.pieList[i].num,name:'外出活动'})
        }else if (this.pieList[i].datas === 8){
          this.pieDataList.push('其他');
          this.pieNumList.push({value:this.pieList[i].num,name:'其他'})
        }else if (this.pieList[i].datas === 9){
          this.pieDataList.push('微信记录');
          this.pieNumList.push({value:this.pieList[i].num,name:'微信记录'})
        }else if (this.pieList[i].datas === 10){
          this.pieDataList.push('QQ记录');
          this.pieNumList.push({value:this.pieList[i].num,name:'QQ记录'})
        }else if (this.pieList[i].datas === 11){
          this.pieDataList.push('电话随记');
          this.pieNumList.push({value:this.pieList[i].num,name:'电话随记'})
        }else {
          this.pieDataList.push('');
          this.pieNumList.push({value:this.pieList[i].num,name:''})
        }
      }
    },
    // 待办任务状态分布图数据查询
    taskStatusData () {
      this.$axios.get('http://localhost:8088/com-task-status-list')
        .then(v => {
          this.pieList = v.data
          //计算
          this.computeTaskStatus()
        })
        .catch(function (v) {})
    },
    // 计算待办任务状态分布
    computeTaskStatus (){
      for(let i=0;i<this.pieList.length;i++) {
        if (this.pieList[i].datas === 1){
          this.pieDataList.push('未结束');
          this.pieNumList.push({value:this.pieList[i].num,name:'未结束'})
        } else if (this.pieList[i].datas === 2){
          this.pieDataList.push('已结束');
          this.pieNumList.push({value:this.pieList[i].num,name:'已结束'})
        }else if (this.pieList[i].datas === 3){
          this.pieDataList.push('取消');
          this.pieNumList.push({value:this.pieList[i].num,name:'取消'})
        }
      }
    },
    // 待办任务优先度分布图数据查询
    taskPriorityData () {
      this.$axios.get('http://localhost:8088/com-task-priority-list')
        .then(v => {
          this.pieList = v.data
          //计算
          this.computeTaskPriority()
        })
        .catch(function (v) {})
    },
    // 计算待办任务状态分布
    computeTaskPriority (){
      for(let i=0;i<this.pieList.length;i++) {
        if (this.pieList[i].datas === 1){
          this.pieDataList.push('高');
          this.pieNumList.push({value:this.pieList[i].num,name:'高'})
        } else if (this.disList[i].datas === 2){
          this.pieDataList.push('低');
          this.pieNumList.push({value:this.pieList[i].num,name:'低'})
        }
      }
    },
    // 分布图
    pieCharts () {
      let myChart = this.$echarts.init(this.$refs.pieCharts)
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: this.pieDataList
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: this.pieNumList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    // 切换柱状图
    changeColumnar(val){
      this.columnarDataList = []
      this.columnarNumList = []
      if (val == 1){
        this.numDateData()
      }else if (val == 2){
        this.cusNumData()
      }
    },
    // 数量月份统计柱状图数据查询
    numDateData () {
      this.$axios.get('http://localhost:8088/com-num-date-list')
        .then(v => {
          this.columnarList = v.data
          //计算
          this.computeAlikeColumnar()
        })
        .catch(function (v) {})
    },
    // 客户联系次数柱状图数据查询
    cusNumData () {
      this.$axios.get('http://localhost:8088/com-cus-num-list')
        .then(v => {
          this.columnarList = v.data
          //计算
          this.computeAlikeColumnar()
        })
        .catch(function (v) {})
    },
    // 计算柱状图-通用
    computeAlikeColumnar (){
      for(let i=0;i<this.columnarList.length;i++) {
        this.columnarDataList.push(this.columnarList[i].datas);
        this.columnarNumList.push(this.columnarList[i].num);
      }
    },
    // 柱状图
    columnarCharts (){
      let myChart = this.$echarts.init(this.$refs.columnarCharts)
      // 绘制图表0
      myChart.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.columnarDataList,
            /* (function(){
               this.findDateData()
               let arr=[];
               for(let i=0;i<this.findDateList.length;i++){
                 arr.push(this.findDateList[i].dates);
               }
               return arr;
             })(),*/
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '60%',
            data: this.columnarNumList,
          }
        ]
      })
    },
    // 切换折线图
    changeLine (val){
      this.lineDataList = []
      this.lineNumList = []
      if (val == 1){
        this.taskNumDateData()
      }else if (val == 2){
        this.actNumDateData()
      }
    },
    // 待办任务数量与月份折线图数据查询
    taskNumDateData ()   {
      this.$axios.get('http://localhost:8088/com-task-num-date-list')
        .then(v => {
          this.lineList = v.data
          //计算
          this.computeAlikeLine()
        })
        .catch(function (v) {})
    },
    // 记录数量与月份折线图数据查询
    actNumDateData () {
      this.$axios.get('http://localhost:8088/com-act-num-date-list')
        .then(v => {
          this.lineList = v.data
          console.log(v.data)
          //计算
          this.computeAlikeLine()
        })
        .catch(function (v) {})
    },
    // 计算折线图-通用
    computeAlikeLine(){
      for(let i=0;i<this.lineList.length;i++) {
        this.lineDataList.push(this.lineList[i].datas);
        this.lineNumList.push(this.lineList[i].num);
      }
    },
    //折线图
    lineCharts (){
      let myChart = this.$echarts.init(this.$refs.lineCharts)
      // 绘制图表0
      myChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['状态']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.lineDataList
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '数量',
            type: 'line',
            data: this.lineNumList,
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },

          }
        ]
      })
    },
    // 判断日期大小
    comDate (v) {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      var dates = new Date(currentdate);
      if(dates.getTime() > v.getTime()){
        return 1;
      } else if (dates.getTime() < v.getTime()){
        return 2;
      }else {
        return 3
      }
    },
    // 获取当前日期
    addDate () {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    // pdf打印
    handleWindowPrint (ele, fileName) {
      document.body.innerHTML = document.querySelector(ele).outerHTML
      // 转异步 等待dom元素渲染（样式）完毕在打印
      setTimeout(() => {
        // 打印
        window.print()
        // 刷新页面
        window.location.reload()
      }, 20)
    },
    //导出全部excel
    exportExcel () {
      var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "行动导出.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    //批量导出excel batchList
    batchExportExcel(){
      this.mulSelection.forEach((item,i)=>{
        this.$set(item,'taskId',item.taskId);
        if (item.taskIs === 1){
          this.$set(item,'taskIs','待办任务');
        }else {
          this.$set(item,'taskIs','记录');
        }
        this.$set(item,'taskDescribe',item.taskDescribe);
        if (item.taskStatus === 1){
          this.$set(item,'taskStatus','未结束');
        }else {
          this.$set(item,'taskStatus','已结束');
        }
        this.$set(item,'customerName',item.customerByCustomerId.customerName);
        this.$set(item,'taskFinishDate',item.taskFinishDate);

        this.$set(item,'empName',item.employeeByExeEmpId.empName);
        this.selectList.splice(i,0,item);
      })
      //excel数据导出
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('../js/Export2Excel');
        const tHeader = ['ID','类型','主题','状态','客户','时间','执行人'];
        const filterVal = ['taskId','taskIs','taskDescribe','taskStatus','customerName', 'taskFinishDate', 'empName'];
        const list = this.selectList;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '行动批量导出');
      })
      this.initData(this.currPage,this.pageSize,this.filterValue,this.content)
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 表头靠左样式
    rowClass(){
      return "text-align:left"
    }
  },
  created: function () {
    this.loginEmp()
    this.initData(this.currPage,this.pageSize,this.filterValue,this.content)
    this.initAllData()
    this.findCalendarCus()
    this.actionTaskData()
    this.numDateData()
    this.taskNumDateData()
  },
  updated() {
    this.pieCharts()
    this.columnarCharts()
    this.lineCharts()
  },
  watch:{
    pieList(val){
      this.pieCharts()
    },
    columnarList(val) {
      this.columnarCharts()
    },
    lineList(val){
      this.lineCharts()
    }
  },
  filters: {
    formatDateJudge: function(time) {
      if(time != null && time != "")
      {
        let date = new Date(time);
        let currentDate = new Date()
        let seperator1 = "-";
        let month = currentDate.getMonth() + 1<10? "0"+(currentDate.getMonth() + 1):currentDate.getMonth() + 1;
        let strDate = currentDate.getDate()<10? "0" + currentDate.getDate():currentDate.getDate();
        let today = currentDate.getFullYear() + seperator1  + month  + seperator1  + strDate
        let todayTime = new Date(today)
        let yesterday = todayTime.setDate(todayTime.getDate() - 1)
        let beforeYesterday = todayTime.setDate(todayTime.getDate() - 1)
        let tomorrow = todayTime.setDate(todayTime.getDate() + 3)
        let afterTomorrow = todayTime.setDate(todayTime.getDate() + 1)
        todayTime.setDate(todayTime.getDate() - 2)
        if (date.getTime() === todayTime.getTime()){
          return '今天'
        }else if (date.getTime() ===  yesterday){
          return '昨天'
        }else if (date.getTime() ===  beforeYesterday){
          return '前天'
        }else if (date.getTime() ===  tomorrow){
          return '明天'
        }else if (date.getTime() ===  afterTomorrow){
          return '后天'
        }else {
          return time
        }
      }else{
        return "";
      }
    }
  }
}
</script>

<style>
  .acr {
    background: #CAE7E8;
    line-height: 20px;
    max-height: 60px;
    width: 100%;
    vertical-align: middle;
    font-family: "Microsoft Yahei";
    border-radius: 3px;
    margin:10px 0;
    color:#666;
  }
  .acp {
    background: #e6e0ec;
    line-height: 20px;
    max-height: 60px;
    width: 100%;
    vertical-align: middle;
    font-family: "Microsoft Yahei";
    border-radius: 3px;
    margin:10px 0;
    color:#666;
  }
  .sd {
    color:#666;
    padding-left: 5px;
  }
  .sd:hover {
    color:black;
    padding-left: 5px;
  }
  .el-calendar-table .el-calendar-day {
    height: 100%;
    min-height: 85px;
  }
  .el-calendar-table:not(.is-range) td.next, .el-calendar-table:not(.is-range) td.prev{
    pointer-events: none;
  }
  .ca-icon{
    color: #337ab7;
    font-size: 14px
  }
  .ca-icon:hover{
    color: #23527c !important;
    font-size: 14px
  }
</style>
